<template>
	<view class="">
		<view class="xinxi2">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<image class="simg" src="" mode=""></image>
				</swiper-item>
				<swiper-item>
					<image class="simg" src="" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="t">
				<view class="t1">
					进口车厘子
				</view>
				<view class="t2">
					每一颗都是
				</view>
				<view class="t3">
					<view class="a">
						<text class="a1">￥39.9</text>
						<text class="a2">￥59.9</text>
					</view>
					<view class="b">
						已售12015
					</view>
				</view>
			</view>
		</view>
		<view class="guige" @click="open">
			<view class="v1">规格</view>
			<view class="v2">
				<text>请选择</text>
				<image src="" mode=""></image>
			</view>
		</view>
		<view class="xq">商品详情</view>
		<view class="d"></view>
		<view class="ft">
			<view class="ft1">
				<image src="" mode=""></image>
				<text>首页</text>
			</view>
			<view class="ft1">
				<image src="" mode=""></image>
				<text>购物车</text>
			</view>
			<button @click="open()" type="default">加入购物车</button>
			<button @click="open()" type="default">立即购买</button>
		</view>
		
		
		
		<view v-if="showSpecifications" class="tan_bottom" @click="open()">
			<view class="bottom_ju_bao" @click.stop="hahahha()">
				<view class="tan_bottom_one">
					<view class="rows">
						<view><image src="" class="tan_bottom_img"></image></view>
						<view class="rowsa tan_bottom_word">
							<view>￥123</view>
							<view>已选：红色</view>
							<view>剩余数量：548</view>
						</view>
					</view>
					<view class="gui_ge_title">规格</view>
					<view class="rows gui_ge_ones">
						<view v-for="(item,index) in 2" class="gui_ge_one">
							<view :class="index==1?'selectaa' : ''" class="gui_ge_on">红色</view>
						</view>
					</view>
					<view class="gui_ge_titleaaa rowsb">
						<view>购买数量</view>
						<view class="rows">
							<view :class="'1'=='1'?'gui_ge_titleaaas_hui' : 'gui_ge_titleaaas'" @click="shuLiang(0)">-</view>
							<view class="shu_liangs">1</view>
							<view class="gui_ge_titleaaas">+</view>
						</view>
					</view>
				</view>
				<view class="bottom_fixed_two rows">
					<view class="bottom_one">加入购物车</view>
					<view class="bottom_two">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				selectb: 0, //规格选择
				numCount: 1, //数量
				showSpecifications:false,//是否显示规格的弹窗
			}
		},
		methods: {
			hahahha() {},// 防止事件冒泡
			shuLiang(event) { // 购物车的数量
				if (event == '0') {
					if (this.numCount <= '1') return false
					this.numCount--
				} else {
					this.numCount++
				}
			},
			selecta(event) { //规格的选择
				if (this.selectb == event) return false
				this.selectb = event
			},
			open() {//弹出层
				this.showSpecifications = !this.showSpecifications;
			},
		}
	}
</script>

<style scoped>
	.xinxi2 {
		border-bottom: 10rpx solid #ddd;
	}

	.swiper {
		height: 400rpx;
	}

	.simg {
		width: 750rpx;
		height: 400rpx;
		background-color: #000000;
	}

	.t {
		padding: 15rpx 15rpx 25rpx 15rpx;
	}

	.t>.t1 {
		font-size: 34rpx;
		margin-bottom: 10rpx;
	}

	.t>.t2 {
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 25rpx;
	}

	.t>.t3 {
		display: flex;
		justify-content: space-between;
	}

	.a1 {
		font-size: 32rpx;
		color: red;
		margin-right: 10rpx;
	}

	.a2 {
		font-size: 30rpx;
		color: #999999;
		text-decoration: line-through;
	}

	.b {
		font-size: 30rpx;
		color: #CCCCCC;
	}

	.gg {
		border-bottom: 10rpx solid #ddd;
	}

	.guige {
		background-color: #FFFFFF;
		padding: 10rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 10rpx solid #ddd;
		font-synthesis: 32rpx;
		color: #999999;
	}

	.guige>.v2>image {
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx;
		background-color: #000000;
	}

	.tanchu {
		background-color: #FFFFFF;
		/* height: 600rpx; */
		/* position: fixed; */
		/* bottom: 0;right: 0;left: 0; */
		padding-bottom: 100rpx;
	}

	.xinxi {
		display: flex;
		padding: 20rpx 15rpx 10rpx;
		border-bottom: 1rpx solid #BBBBBB;
	}

	.xinxi>image {
		width: 150rpx;
		height: 130rpx;
		border-radius: 20rpx;
		margin-top: -60rpx;
		margin-right: 20rpx;
	}

	.jiage {
		display: flex;
		flex-direction: column;

	}

	.jiage>.t1 {
		color: red;
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}

	.jiage>.t2 {
		margin-bottom: 8rpx;
	}

	.gg {
		padding: 25rpx 0 50rpx 0;
		border-bottom: 1rpx solid #bbb;
	}

	.gg>.title {
		margin-left: 20rpx;
		font-size: 30rpx;
		margin-bottom: 40rpx;
	}

	.gg>.btn {
		display: flex;
	}

	.gg>.btn button {
		border: 1rpx solid #BBBBBB;
		padding: 5rpx 45rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		margin: 0 20rpx;
	}

	.selectc {
		border: 1rpx solid #FF8F1C;
		background-color: #FF8F1C;
		color: #FFFFFF;
	}

	.shu_liangs {
		padding: 0rpx 22rpx;
	}

	.gui_ge_titleaaas {
		width: 58rpx;
		height: 42rpx;
		line-height: 34rpx;
		border-radius: 6rpx;
		border: 3rpx solid #666666;
		text-align: center;
		font-size: 48rpx;
		color: #333333;
	}

	.gui_ge_titleaaas_hui {
		width: 58rpx;
		height: 42rpx;
		line-height: 34rpx;
		border-radius: 6rpx;
		border: 3rpx solid #999999;
		text-align: center;
		font-size: 48rpx;
		color: #999999;
	}

	.footer {
		height: 100rpx;
		display: flex;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		text-align: center;
		color: #FFFFFF;

	}

	.footer>.f1 {
		background-color: #007AFF;
		width: 50%;
		line-height: 100rpx;
	}

	.footer>.f2 {
		background-color: #FF8F1C;
		width: 50%;
		line-height: 100rpx;
	}

	.rowsb {
		margin: 30rpx 20rpx;
	}
	.rows { display: flex; }
	.xq{
		text-align: center;
		color: orange;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-bottom: 10rpx solid #ddd;
	}
	.d{
		margin-top: 10rpx;
		margin-bottom: 200rpx;
	}
	.ft{
		height: 90rpx;
		background-color: #FFFFFF;
		position: fixed;
		right: 0;left: 0;bottom: 0;
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		border-top: 4rpx solid #DDDDDD;
	}
	.ft>.ft1{
		display: flex;
		flex-direction: column;
		text-align: center;
		font-size: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.ft>.ft1>image{
		margin: 10rpx auto ;
		width: 40rpx;height: 40rpx;
		background-color: #000000;
	}
	.ft>button{
		margin: 0 0 0 70rpx;padding: 0;
		width: 160rpx;height: 60rpx;
		font-size: 28rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #DDDDDD;
		line-height: 60rpx;
		
	}
	
	.tan_bottom_word > view:nth-child(2) {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	.tan_bottom_word > view:first-child {
		font-size: 32rpx;
		color: #2AA5FE;
		font-weight: bold;
	}
	.tan_bottom_word {flex-direction: column;margin-left: 22rpx;}
	.tan_bottom_img {width: 234rpx;height: 234rpx;margin-top: -48rpx;background-color: #F1F1F1;}
	.bottom_two_two {text-align: center;}
	.tan_bottom_one {
		padding: 0rpx 22rpx;
	}
	.tan_bottom {
		width: 750rpx;
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .6);
	}
	.gui_ge_titleaaas {
		width: 58rpx;height: 38rpx;
		line-height: 32rpx;
		border-radius: 6rpx;
		border: 3rpx solid #666666;
		text-align: center;
		font-size: 48rpx;
		color: #333333;
	}
	.gui_ge_titleaaas_hui {
		width: 58rpx;height: 38rpx;
		line-height: 32rpx;
		border-radius: 6rpx;
		border: 3rpx solid #999999;
		text-align: center;
		font-size: 48rpx;
		color: #999999;
	}
	.selectaa {
		background-color: #2AA5FE !important;
		color: #FFFFFF !important;
	}
	.gui_ge_ones {
		flex-wrap: wrap;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		/* justify-content: space-between; */
		padding: 32rpx 0rpx;
	}
	.gui_ge_one {
		flex:0 0 25%;
		margin-top: 12rpx;
	}
	.gui_ge_on {
		width: 80%;height: 58rpx;
		border-radius: 8rpx;
		/* background-color: #FE6B08; */
		line-height: 58rpx;
		border:3rpx solid #2AA5FE;
		color: #333333;
	}
	.bottom_ju_bao {
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: #f9f9f9;
		border-top: 3rpx solid #f5f5f5;
	}
	.bottom_fixed_two {
		flex:0 0 50%;
		text-align: center;
	}
	.bottom_one {
		flex:0 0 50%;
		font-size: 32rpx;
		background-color: #2AA5FE;
		line-height: 108rpx;
		color: #FFFFFF;
	}
	.bottom_two {
		flex:0 0 50%;
		/* width: 100%; */
		font-size: 30rpx;
		background-color: #FF6B03;
		line-height: 108rpx;
		color: #FFFFFF;
	}
</style>
